<template>
  <div class="app-container">
    <panel types="primary">
      <template slot="title">查询条件</template>
      <template slot="body">
        <el-form :inline="true">

          <el-form-item label="角色名称">
            <el-input v-model="formSearch.roleName"   placeholder="支持模糊查询"></el-input>
          </el-form-item>

          <el-form-item label="状态" >
            <el-select v-model="formSearch.status">
              <el-option label="正常" v-bind:value="0"></el-option>
              <el-option label="停用" v-bind:value="1"></el-option>
            </el-select>
          </el-form-item>

         <el-form-item>
           <el-button type="primary"  v-on:click="search">查询</el-button>
           <el-button type="success"  v-on:click="addForm">新增</el-button>
         </el-form-item>
        </el-form>

      </template>
    </panel>

    <el-table :data="tableData" border>
      <el-table-column prop="roleName" label="角色名称"></el-table-column>
      <el-table-column prop="roleKey" label="角色标识"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.status===0"   effect="dark">正常</el-tag>
            <el-tag type="danger"  v-else  effect="dark">停用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
    </el-table>

    <el-pagination
    v-on:size-change="handleSizeChange"
    v-on:current-change="handleCurrentChange"
    v-bind:page-sizes="[5,10, 20, 30, 40,50]"
    v-bind:current-page="formSearch.pageNumber"
    v-bind:page-size="formSearch.pageSize"
    v-bind:total="total"
    layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


    <!-- 修改和新增对话框 -->
     <el-dialog v-bind:title="title" :visible.sync="dialogVisible" width="500px"   >
    	   <el-form v-bind:model="formData" ref="editForm"  v-bind:rules="rules"  label-width="80px" >

    			  <el-form-item label="角色名称" prop="roleName">
    				  <el-input   v-model="formData.roleName" placeholder="请输入色名称"></el-input>
    			  </el-form-item>

    			 <el-form-item label="角色标识" prop="roleKey">
    				 <el-input v-model="formData.roleKey" placeholder="请输入角色标识"></el-input>
    			 </el-form-item>

    			<el-form-item label="状态" prop="status">
    				<el-radio v-model="formData.status" v-bind:label="0">正常</el-radio>
    				<el-radio v-model="formData.status" v-bind:label="1">停用</el-radio>
    			</el-form-item>

    	    </el-form>


        <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible = false">取消</el-button>
           <el-button type="primary" @click="saveData">保存</el-button>
         </div>

   </el-dialog>

  </div>
</template>

<script>
  import panel from '@/components/Panel/index.vue'
  import roleService from '@/service/RoleService.js'

  export default {
    name: 'Role',
    components: {
      panel
    },
    data(){
      return {
        // 新增或修改验证规则
        rules:{},
        // 新增或修改数据模型
        formData: {
        	roleId: undefined,
        	roleName: undefined,
        	roleKey: undefined,
        	status: 0
        },
        // 隐藏对话框
        dialogVisible: false,
        title: '添加数据',

        total: 0,
        tableData: [],
        formSearch: {
          roleName :undefined,
          status: 0,
          pageNumber: 1,
          pageSize: 5
        }
      }
    },
    methods: {
    },
    created() {
      roleService.init(this)
      console.log(this)
    }
  }
</script>

<style>
</style>
